<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"   href="../../static/layui/css/layui.css" />
</head>
<body>
<div class="layui-container">
	<!-- 写搜索内容 -->
	<div>
		<div class="layui-form layui-form-pane" >
			<div class="layui-form-item"> 
				<div class="layui-inline">
					<label class="layui-form-label">
						账号
					</label>
					<div class="layui-input-inline">
						<input  class="layui-input" placeholder="用户账号" id="userName"  name="userName"/>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">
						名称
					</label>
					<div class="layui-input-inline">
						<input  class="layui-input" placeholder="用户名称"  id="realName" />
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">
						角色
					</label>
					<div class="layui-input-inline">
						<select id="type">
							<option value="">请选择角色</option>
							<option value="1">管理员</option>
							<option value="2">业务员</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<button class="layui-btn" id="searchBtn">搜索</button>		
				</div>
			</div>
				
		</div>
	</div>
	<!-- 显示数据的table -->
	<div>
		<table id="dataTable"  lay-filter="dataTableFilter"></table>
	</div>

</div>
<!-- 工具栏模板 -->
<!-- 头工具栏 -->
<script type="text/html" id="headerBtns">
	<button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
	<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</button>
</script>
<!-- 行工具栏 -->
<script type="text/html" id="rowBtns">
	<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="reset">重置密码</button>
</script>
<!-- 新增用户信息模板 -->
<script type="text/html" id="editForm">
	<div style="padding-left:100px;padding-top:20px">
		<form class="layui-form layui-form-pane" >
			<input  type="hidden" name="service" value="add" />
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">
						账号
					</label>
					<div class="layui-input-inline">
						<input  class="layui-input" placeholder="用户账号"  name="userName" lay-verify="required" lay-reqText="请输入账号" />
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">
						密码
					</label>
					<div class="layui-input-inline">
						<input  class="layui-input" placeholder="密码" name="password"  value="123456" readonly="readonly"/>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">
						姓名
					</label>
					<div class="layui-input-inline">
						<input  class="layui-input" placeholder="姓名" name="realName" lay-verify="required" lay-reqText="请输入姓名"/>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">
					角色
				</label>
				<div class="layui-input-inline">
					<select name="type">
						<option value="2">业务员</option>
						<option value="1">管理员</option>
					</select>
				</div>
			</div>
			<input type="hidden" lay-submit lay-filter="submitFormFilter" id="submitFormBtn"  />
		</form>
	</div>
</script>

<script type="text/javascript" src="../../static/layui/layui.js"> </script>
<script type="text/javascript" >
	layui.use([ 'laypage', 'layer', 'table','jquery','form'], function() {
		var laypage = layui.laypage //分页
				, layer = layui.layer //弹层
				, table = layui.table //表格
				, $ = layui.jquery  // jquery模块
				, form = layui.form ; // form 表单模块


		//重置密码方法
		function reset(data){
			layer.confirm('确定要重置此密码吗？', function(index){ // index 表示当前弹出层的下标
				// layer.msg("data.id" + data.id)
				$.post("/user/user.do?service=reset", {'id': data.id},function(rs){
					var res = JSON.parse(rs);
					layer.msg(res.code)
					if(res.code == 200){
						$("#searchBtn").click(); //重新提交查询 ，重新加载表格
						layer.close(index); // 关闭当前弹出层
					}
					// 重置不成功时，显示不成功的原因
					layer.msg(res.msg);
				});

				layer.close(index); // 关闭当前弹出层
			});
		}

		//监听工具条
		table.on('tool(dataTableFilter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

			if (layEvent == "reset"){ // 判断当前行的操作事件是否为重置
				reset(data);
			}
		});



		//执行一个 table 实例
		var tab = table.render({
			elem: '#dataTable'
			,id:'idTest'
			// , height: 800
			, url: '/user/user.do?service=list' //数据接口
			, title: '用户表'
			, page: true //开启分页 传递给后台两个参数 page 当前页数 limit 每页显示数
			,toolbar:'#headerBtns' //开始头部工具栏
			// ,limit: 5
			// ,where:{
			// 	page:1
			// }
			// ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
			// ,totalRow: true //开启合计行
			, cols: [[ //表头
				{type: 'checkbox', fixed: 'left'}
				, {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left', totalRowText: '合计：'}
				, {field: 'userName', title: '用户名', width: 80}
				,{field: 'password', title: '密码', width: 90, sort: true, totalRow: true}
				,{field: 'realName', title: '真实姓名', width:80, sort: true}
				,{field: 'img', title: '头像', width: 180, sort: true, totalRow: true}
				,{field: 'type', title: '类型', width:60 ,templet:function (data) {
							if (data.type === 1 ){  // = 赋值  == 判断  === 判断
								return "管理员"
							}else{
								return  "业务员";
							}
					}}
				,{field: 'isDel', title: '启用', width: 60}
				,{field: 'createTime', title: '创建时间', width: 160}
				,{field: 'modifyTime', title: '修改时间', width: 160, sort: true, totalRow: true}
				,{fixed: 'right', align:'center', toolbar: '#rowBtns'}
			]]
			,response:{
				statusCode: 200
			}
			,parseData: function(res){ //res 即为原始返回的数据 res == resultData   users == res.data.data
				console.log(res)
				return {
					"code": res.code, //解析接口状态
					"msg": res.msg, //解析提示文本
					"count": res.data.totalNumber, //解析数据长度
					"data": res.data.data //解析数据列表
				};
			}

		})

		$("#searchBtn").click(function () {
			var $userName = $("#userName").val();
			var $realName = $("#realName").val();
			var $type = $("#type").val();

			tab.reload({
				where:{
					"userName":$userName
					,"realName":$realName
					,"type":$type
				}
			})
		})
		//监听事件
		table.on('toolbar(dataTableFilter)', function(obj){
			var checkStatus = table.checkStatus("idTest");
			switch(obj.event){
				case 'add':
					add(); // 新增一条数据 ，不需要参数
					break;
				case 'del':
					del(checkStatus.data); // 需要知道删除哪些id 需要参数
					break;
			};
		});

		function del(data) {
			// data数据属于一个数组
			var ids = "";  //  7& 8 &9& 10   id=7  id =
			$.each(data,function (index , value ) {
				// 将传递进来的id集合 进行拼接传递给后台
				ids = ids +value.id +"&";
			})
			layer.confirm('确定要删除吗？', function(index){ // index 表示当前弹出层的下标
				// layer.msg("data.id" + data.id)
				$.post("/user/user.do?service=delete", {'ids':ids},function(rs){
					var res = JSON.parse(rs);
					layer.msg(res.code)
					if(res.code == 200){
						$("#searchBtn").click(); //重新提交查询 ，重新加载表格
						layer.close(index); // 关闭当前弹出层
					}
					// 重置不成功时，显示不成功的原因
					layer.msg(res.msg);
				});

				layer.close(index); // 关闭当前弹出层
			});
		}

		function add(){
			layer.open({
				id:"add",
				title:'编辑',
				type:1,//页面层
				content:$("#editForm").html(),
				btn:['提交','取消'],
				area:['500px','450px'],
				yes:function(layero,index){//点击提交时触发
					$("#submitFormBtn").click();
				},
				btnAlign:'c',
				success:function(layero,index){// 页面弹出成功触发
					//重新渲染表单
					form.render();
					//为表单新增监听提交事件
					form.on("submit(submitFormFilter)",function(d){
						$.post("/user/user.do?service=add",d.field,function(res){
							var rs = JSON.parse(res); // 将json字符串转换成json对象
							//业务正常
							if(rs.code == 200){
								layer.msg("新增成功");
								//让搜索按钮进行点击  刷新table
								$("#searchBtn").click();
								//关闭弹层
								layer.close(index);
								return false;
							}
							layer.msg(rs.msg);
						});
						return false;//阻止表单默认提交
					});
				}
			});
		}

	})

</script>
</body>
</html>